<template>
  <el-card class="stats-card" :body-style="{ padding: '15px' }">
    <h2 class="section-title">📊 统计概览</h2>
    <div class="stats-container">
      <div class="stat-item danger">
        <div class="stat-label">待复核</div>
        <div class="stat-value">{{ statistics.pending || 0 }}</div>
      </div>
      <div class="stat-item warning">
        <div class="stat-label">复核中</div>
        <div class="stat-value">{{ statistics.in_review || 0 }}</div>
      </div>
      <div class="stat-item success">
        <div class="stat-label">已通过</div>
        <div class="stat-value">{{ statistics.approved || 0 }}</div>
      </div>
      <div class="stat-item info">
        <div class="stat-label">已驳回</div>
        <div class="stat-value">{{ statistics.rejected || 0 }}</div>
      </div>
      <div class="stat-item primary">
        <div class="stat-label">总计</div>
        <div class="stat-value">{{ statistics.total || 0 }}</div>
      </div>
    </div>
  </el-card>
</template>

<script setup lang="ts">
import { defineProps } from "vue";

const props = defineProps({
  statistics: {
    type: Object,
    required: true,
    default: () => ({
      pending: 0,
      in_review: 0,
      approved: 0,
      rejected: 0,
      total: 0,
    }),
  },
});
</script>

<style scoped lang="scss">
.stats-card {
  margin-bottom: 20px;
  border-radius: 8px;
  border: 1px solid #f0f0f0;
}

.section-title {
  font-size: 16px;
  font-weight: 500;
  margin: 0 0 15px 0;
  color: #444;
  display: flex;
  align-items: center;
  gap: 8px;
}

.stats-container {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.stat-item {
  flex: 1;
  min-width: 100px;
  padding: 15px 10px;
  text-align: center;
  border-radius: 6px;
  color: #fff;

  &.danger {
    background-color: #f5222d;
  }
  &.warning {
    background-color: #faad14;
  }
  &.success {
    background-color: #52c41a;
  }
  &.info {
    background-color: #1890ff;
  }
  &.primary {
    background-color: #722ed1;
  }
}

.stat-label {
  font-size: 14px;
  margin-bottom: 5px;
  display: block;
}

.stat-value {
  font-size: 20px;
  font-weight: 600;
}
</style>
